<template>
    <div id="daili">
       <div class="ban">
           <img src="../assets/img/bg.png" alt="">
       </div>

       <div class="header">
           合作申请
       </div>
       <div class="formdata">
           <el-form :model="formData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="姓名" prop="pass">
    <el-input  v-model="formData.username" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="联系电话" prop="checkPass">
    <el-input  v-model="formData.telephone" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="所在省市" prop="age">
    <el-input v-model="formData.address"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="age">
    <el-input v-model="formData.mailbox"></el-input>
  </el-form-item>
  <el-form-item label="验证码" prop="age">
    <el-input placeholder="请输入内容" v-model="checkCode">
    <template slot="append" ><input type="button"  v-model="code"  class="code" @click="getCode" ></input></template>
  </el-input>
  </el-form-item>
</el-form>
       </div>

       <div class="subbtn">
           <el-button type="primary" @click="subForm" >立即申请</el-button>
       </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                formData: {
                    username: "",
                    telephone: "",
                    address: "",
                    mailbox: ""
                },
                code: "",
                checkCode: "",
            }
        },
        mounted () {
            this.getCode();
            this.timer()
        },
        methods: {
            getCode() {
                let len = 4
                let str = ""
                for(let i = 0; i < len; i++) {
                    str+= Math.floor(Math.random()* 10)
                }
                this.code = str
            },
            timer() {
                let self = this
                setInterval(() => {
                    self.getCode()
                }, 1000 * 60);
            },
             async subForm() {
                let { username, telephone, address, mailbox } = this.formData
                if (!username) {
                    this.$message.error("请输入姓名")
                    return false
                } else if (!telephone) {
                    this.$message.error("请输入手机号码")
                    return false
                } else if (!address) {
                    this.$message.error("请输入您的地址")
                    return false
                } else if (!mailbox) {
                    this.$message.error("请输入您的邮箱")
                    return false
                } 
                else if ( this.checkCode != this.code ) {
                    this.$message.error("验证码不正确！")
                    this.getCode()
                    return false
                }  else {
                   let res = await this.$axios.post("/index/index/leave", this.formData)
                   //console.log(res);
                   let code = res.data.code
                   if (code == 202) {
                       this.$message.success("提交成功")
                       this.DialogData.show = false
                   } else {
                       this.$message.success("网络问题，请重试！")
                       this.DialogData.show = false
                   }
                }
            },
        },
    }
</script>

<style  scoped>
.code {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}
.subbtn {
    width: 100%;
    text-align: center;
    padding: 20px 0;
}
.header {
    font-size: 30px;
    color: #2b40cd;
    width: 100%;
    text-align: center;
    padding: 20px 0;
}
#daili {
    width: 100%;
}
#daili .ban {
    width: 100%;
}
#daili .ban img {
    width: 100%;
    min-width: 1200px;
    display: block;
}
.formdata {
    width: 800px;
    margin: 20px auto;
}
</style>